<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度注册验证</title>
    <style>
        .body {
            margin: 0;
            padding: 0;
            font-size: 14px;
            border: 1px solid #999999;
        }

        tr {
            line-height: 50px;
        }

        .picButton {
            /* background-image: url("../image/register_submit.gif"); */
            border: 0;
            width: 128px;
            height: 28px;
            color: skyblue;
            font-weight: bold;
        }

        .wrap {
            text-align: center;
            vertical-align: middle;
        }

        .picButton1 {
            /* position: absolute;
            left: 0; */
            border: 0;
            width: 128px;
            height: 28px;
            color: skyblue;
            font-weight: bold;
            margin-right: 100px;
            /* float: left; */
        }

        .left {
            text-align: right;
            background-color: rgb(232, 251, 255);
            width: 186px;
        }

        .center {
            border: 1px solid #000000;
            width: 173px;
            margin: 0 31px;
        }

        .right {
            color: red;
            width: 60px;
            /* display: none; */
        }

        a {
            color: #0033FF;
        }

        a:hover {
            color: #FF0000;
            text-decoration: none;
        }

        #item {
            color: red;
            font-size: 16px;
            font-weight: bold;
            line-height: 50px;
            text-align: center;
        }

        .userT {
            display: none;
        }

        .phoneT {
            display: none;
        }

        .emailT {
            display: none;
        }

        .passwordT {
            display: none;
        }

        .passwordT1 {
            display: none;
        }
    </style>
</head>

<body>
    <table align="center">
        <tr>
            <td>
                <form>
                    <table class="body">
                        <tr>
                            <td id="item" colspan="3">百度用户注册</td>
                        </tr>
                        <tr>
                            <td class="left">用户名:</td>
                            <td><input type="txt" class="center user"></td>
                            <td class="right userT">输入有误</td>
                        </tr>

                        <tr>
                            <td class="left">请填写您的Email地址:</td>
                            <td><input type="email" class="center email"></td>
                            <td class="right emailT">输入有误</td>
                        </tr>

                        <tr>
                            <td class="left">手机号:</td>
                            <td><input type="phone" class="center phone"></td>
                            <td class="right phoneT">输入有误</td>
                        </tr>

                        <tr>
                            <td class="left">设置密码:</td>
                            <td><input type="password" class="center password"></td>
                            <td class="right passwordT">输入有误</td>
                        </tr>

                        <tr class="wrap">
                            <td></td>
                            <td>
                                <input type="reset" class="picButton1 " value="重&ensp;置"></td>
                            <td><input type="submit" class="picButton" value="注&ensp;册"></td>
                        </tr>
                    </table>
                </form>
            </td>
        </tr>
    </table>

    <script>
        var user = document.getElementsByClassName('user')
        var email = document.querySelector('.email')
        var phone = document.querySelector('.phone')
        var password = document.querySelector('.password')
        var userT = document.querySelector('.userT')
        var phoneT = document.querySelector('.phoneT')
        var emailT = document.querySelector('.emailT')
        var passwordT = document.querySelector('.passwordT')

        // 用户名 可以是7位中文或者14个字符
        var userName = /^[\u4e00-\u9fa5]{1,7}$|^[a-zA-Z]{1,14}$/
        user[0].onblur = function () {

            if (!userName.test(user[0].value)) {
                // alert('输入的用户名有误')
                userT.style.display = 'block'
            } else {
                userT.style.display = 'none'
            }
        }
        // 邮箱 前面是5-12位的数字或者字母 @ 163 126 qq .  
        var emailName = /^[0-9a-zA-Z]{5,12}@(163|126|qq)\.(sina|cn|com|net)$/;
        // console.log(email);

        email.onblur = function () {
            // console.log(1);

            if (!emailName.test(email.value)) {
                // alert('有误')
                emailT.style.display = 'block'
            } else {
                emailT.style.display = 'none'
            }
        }
        // 手机号码 开头是1 第二位可以是3 5 6 7 8 9 后面的还有9位 不限
        var phoneNum = /^1[356789]\d{9}$/
        phone.onblur = function () {
            if (!phoneNum.test(phone.value)) {
                // alert('111')
                phoneT.style.display = 'block'
            } else {
                phoneT.style.display = 'none'
            }
        }

        // 密码 可以是6到14位 的数字 字母 标点符号
        var passwordNum = /^[0-9a-zA-Z,\.?]{6,14}$/
        password.onblur = function () {

            // if (!passwordNum.test(password.value)) {
            //     console.log(passwordNum.test(password.value));

            //     passwordT.style.display = 'block'
            // } else {
            //     passwordT.style.display = 'none'
            // }
            res(passwordNum,password)
            console.log(res(passwordNum,password));
            
        }
        var tr =document.getElementsByTagName(tr)
        var center = document.querySelectorAll('.center')

        function res(a, b) {
            tr.onclick = function (e) {
                var e = e || window.event
                if (e.target.className === 'center') {
                    if (!a.test(b.value)) {
                        console.log(e.target);
                        e.target.style.display = 'block'
                    } else {
                        e.target.style.display = 'none'
                    }
                }
            }
        }

    
    </script>
</body>

</html>